<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <link type="text/css" rel="stylesheet" href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" href="css/cart.css" th:href="@{/css/cart.css}"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}"/>
</head>

<body>
<!--导航部分  begin-->
<div th:replace="common/header :: header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel :: carousel"></div>
<!--最顶端轮播图片 end-->
<!--购物车 begin-->
<!--外层div-->
<div class="container">
    <!--左边-->
    <div class="col-md-8 col-sm-12">
        <!--左边-->
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon "></span>&nbsp;&nbsp;我的收藏</a>
            </li>
        </ol>

        <!--购物车表格 begin-->
        <div class="table-responsive" id="imgDiv">
            <table class="table table-hover table-striped" style="vertical-align:middle;">
                <thead>

                <tr class="text-success success">
                    <!--                    <th><input type="checkbox" id="selectAll" onclick="selectAll(this)"></th>-->
                    <th id="sequence" class="text-center">序号</th>
                    <th class="text-center">图片</th>
                    <th class="text-center">书名</th>
                    <th class="text-center">单价</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tby">
                <tr th:each="item:${favorites}">
                    <td th:text="${item.id}" class="text-center">1001</td>
                    <td class="text-center"><img src="images/tenxunchuan.jpg" th:src="@{'/images/' + ${item.imgUrl}}"></td>
                    <td th:text="${item.bookName}" class="text-center">腾讯传</td>
                    <td th:text="${item.newPrice}" class="text-center">35.0元</td>
                    <td th:onclick="changeColor([[${item.bookId}]])" class="text-center">
                        <a href="javascript:void(0)">取消收藏</a></td>

                </tr>
                </tbody>
                <tfoot>


                </tfoot>
            </table>
        </div>

    </div>

    <!--右边-->
    <div class="col-md-4 col-sm-3 col-xs-8">
        <!--猜您喜欢-->
        <div>
            <span class="text-info"><span class="glyphicon glyphicon-heart"></span><span style="font-size: 20px; ">&nbsp;&nbsp;猜您喜欢</span></span>
            <div class="row" id="love">
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail">
                        <a href="details.html"><img src="images/cikehuakai.jpg" th:src="@{/images/cikehuakai.jpg}"
                                                    style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>此刻花开</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a href="details.html"><img src="images/jindumanbu.jpg" th:src="@{/images/jindumanbu.jpg}"
                                                    style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>京都漫步</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a href="details.html"><img src="images/lapulasidemonv.jpg"
                                                    th:src="@{/images/lapulasidemonv.jpg}" style="height: 200px; "
                                                    alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>拉普拉斯的魔女</h3>
                        </div>
                    </div>
                </div>
                <div>
                    <ul class="pager ">
                        <li>
                            <a href="#" onclick="pageUp() ">&larr;上一页</a>
                            <a href="#" onclick="pageDown() ">下一页 &rarr;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--喜欢end-->
    </div>
</div>

<!--引入js文件-->
<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
<script src="js/wow.js" th:src="@{/js/wow.js}"></script>
<script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript"></script>
<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
<script src="js/details.js" th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
<script src="js/cart.js" th:src="@{/js/cart.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
    }
    ;


    function changeColor(bookId) {
        $.ajax({
            url: "/favorites/delete",
            data: {"bookId": bookId},
            method: "post",
            success: function (data) {
                if (data == 'success') {
                    alert("取消收藏！")
                    // changeColor();
                    window.location.reload();
                }
            }
        })
    }


</script>
</body>

</html>
